<!DOCTYPE html>
<html>

<head>
    <title>WFS - GetFeature</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
</head>

<body>
    <div id="map" class="map"></div>
    <script>
        var vectorSource = new ol.source.Vector();
        var vector = new ol.layer.Vector({
            source: vectorSource,
            style: new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'rgba(0, 0, 255, 1.0)',
                    width: 2
                })
            })
        });

        var raster = new ol.layer.Tile({
            source: new ol.source.BingMaps({
                imagerySet: 'Aerial',
                key: 'Your Bing Maps Key from http://www.bingmapsportal.com/ here'
            })
        });

        var map = new ol.Map({
            layers: [raster, vector],
            target: document.getElementById('map'),
            view: new ol.View({
                center: [-8908887.277395891, 5381918.072437216],
                maxZoom: 19,
                zoom: 12
            })
        });

        // generate a GetFeature request
        var featureRequest = new ol.format.WFS().writeGetFeature({
            srsName: 'EPSG:3857',
            featureNS: 'http://openstreemap.org',
            featurePrefix: 'osm',
            featureTypes: ['water_areas'],
            outputFormat: 'application/json',
            filter: ol.format.filter.and(
                ol.format.filter.like('name', 'Mississippi*'),
                ol.format.filter.equalTo('waterway', 'riverbank')
            )
        });

        // then post the request and add the received features to a layer
        fetch('https://ahocevar.com/geoserver/wfs', {
            method: 'POST',
            body: new XMLSerializer().serializeToString(featureRequest)
        }).then(function(response) {
            return response.json();
        }).then(function(json) {
            var features = new ol.format.GeoJSON().readFeatures(json);
            vectorSource.addFeatures(features);
            map.getView().fit(vectorSource.getExtent());
        });
    </script>
</body>

</html>